<template>
	<view class="">
		<view class="top"></view>
		<view class="main">
			<view class="title">
				{{AddRepairOrder}}
			</view>
			<view class="list">
				<view class="list-view">
					标题：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="标题" :value="allsubit.ro_title" v-model="allsubit.ro_title" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					内容：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="内容" :value="allsubit.ro_content" v-model="allsubit.ro_content" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					联系人：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="联系人" :value="allsubit.ro_person" v-model="allsubit.ro_person" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					电话：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="电话" :value="allsubit.ro_phone" v-model="allsubit.ro_phone" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					详细地址：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="详细地址" :value="allsubit.ro_addr" v-model="allsubit.ro_addr" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					第三方水电公司：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="第三方水电公司" :value="allsubit.PaymentAreaId" v-model="allsubit.PaymentAreaId" />
				</view>
			</view>
		</view>
		
		<view class="bottom" @click="subit()" id="buttomName">
			{{subitName}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				AddRepairOrder:'新增维修单',
				allsubit:{
					PaymentAreaId:1
				},
				subitName:'确认提交',
				token:'',
				mainmsg:''
			}
		},
		onLoad: function(options) {
			this.token = uni.getStorageSync('token');
			this.mainmsg = uni.getStorageSync('mainmsg');
			
			if (options.id) {
				this.miantitle = '维修单详情'
				this.subitName = '已提交成功'
				
				let data = {
					'id': options.id
				}
				let _this = this
				uni.request({
					url: _this.$title + 'AppUserFeatures/GetRepairOrder',
					data: data,
					header: {
						'auth': _this.token
					},
					success: (res) => {
						if (res.data.status === 200) {
							_this.allsubit = res.data.data
							var div = document.getElementById(
								'buttomName');
							div.setAttribute("class",
								"bottom-after");
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.message
							})
						}
					}
				});
			}
		},
		
		onUnload:function(){
			
		},
		methods: {
			subit(){
				if(this.subitName === '已提交成功'){
					return
				}
				
				if(!this.allsubit.ro_title){
					uni.showToast({
						icon: "none",
						title: '请填写标题'
					})
					return
				}
				
				if(!this.allsubit.ro_content){
					uni.showToast({
						icon: "none",
						title: '请填写内容'
					})
					return
				}
				
				if(!this.allsubit.ro_person){
					uni.showToast({
						icon: "none",
						title: '请填写联系人'
					})
					return
				}
				
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.allsubit.ro_phone))){
					uni.showToast({title: '请填写电话',icon:"none"});
					return false; 
				} 
				
				if(!this.allsubit.ro_addr){
					uni.showToast({
						icon: "none",
						title: '请填写详细地址'
					})
					return
				}
				
				if(!this.allsubit.PaymentAreaId){
					uni.showToast({
						icon: "none",
						title: '请填写第三方水利公司'
					})
					return
				}
				
				
				let _this = this
				_this.allsubit.Id = this.mainmsg.Id
				_this.allsubit.AppUserInfoId = this.mainmsg.Id
				
				uni.request({
					url: _this.$title + 'AppUserFeatures/GetRepairOrderCode',
					header:{
						'auth':_this.token
					},
					success: (res) => {
						if(res.data.status === 200){
							_this.allsubit.plp_repaircode = res.data.data
							
							uni.request({
								url: _this.$title + 'AppUserFeatures/AddRepairOrder',
								data:_this.allsubit,
								header:{
									'auth':_this.token
								},
								success: (res) => {
									if(res.data.status === 200){
										uni.showToast({
											icon: "none",
											title: res.data.message
										})
										_this.subitName = '已提交成功'
										var div = document.getElementById(
											'buttomName');
										div.setAttribute("class",
											"bottom-after");
									}
								}
							});
							
							
							
						}
					}
				});
			}
		}
	}
</script>

<style>
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.top {
		width: 100%;
		height: 12rem;
		background-color: #18ab4e;
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
	}

	.main {
		/* position: relative; */
		background-color: white;
		margin: 0 auto;
		margin-top: -7rem;
		padding-bottom: 2rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
	}
	
	.main2 {
		/* position: relative; */
		background-color: white;
		margin: 0 auto;
		margin-top: 2rem;
		padding-bottom: 2rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
	}
	
	.list2 {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		border-bottom: 1px solid #ABB1BA;
		height: 5rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.title {
		/* position: relative; */
		padding-top: 4rem;
		text-align: center;
		font-size: x-large;
		font-weight: 400;
	}

	.list {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		border-bottom: 1px solid #ABB1BA;
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-last {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		/* display: flex; */
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		float: right;
		/* border-bottom: 1px solid #ABB1BA; */
		height: 1rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-view {
		width: 250rpx;
		white-space: nowrap;
	}

	.list-car {
		display: flex;
		justify-content: space-between;
	}

	input {
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
		font-size: medium;
		border: 0;
		outline: none;
		background-color: rgba(0, 0, 0, 0);
		width: 40vw;
	}

	.face {
		background-color: white;
		margin: 0 auto;
		margin-top: 1rem;
		height: 5rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
		display: flex;
		justify-content: space-between;
	}

	.canvas-bg {
		/* margin: 0 auto; */
		/* margin-top: 1rem; */
		height: 88vw;
		width: 88vw;
		float: left;
		/* box-shadow: 0px 0px 0.625rem #55ffff; */
		/* z-index: 1000; */
		/* border-radius: 1.625rem; */
		/* display: flex; */
		/* justify-content: space-between; */
	}

	.carNum {
		border: 1px solid black;
		width: 1.8rem;
		height: 2.6rem;
		margin-top: 0.2rem;
		text-align: center;
		line-height: 2.6rem;
	}

	/* .carNum:hover {
		border: 1px solid red;
	} */

	.isNumClick {
		border: 1px solid red;
	}

	/* .carNum:hover ~ #two { background-color: yellow; } */


	.bottom {
		margin: 0 auto;
		margin-top: 5rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		background-color: #18ab4e;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
	}

	.bottom-after {
		margin: 0 auto;
		margin-top: 7rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
		background-color: #b4bdcb;
	}
</style>
